<template>
  <div id="detail">
    <detail-nav-bar class="detail-nav" ref="detalnavbar" @detailNavBarTitleClick="titleClick"></detail-nav-bar>
    <scroll class="content" ref="scroll" :probe-type="3" @scroll="contentScroll">
      <detail-swiper :top-images="topImages"></detail-swiper>
      <detail-base-info :goods="goods"></detail-base-info>
      <detail-shop-info :shop="shop"></detail-shop-info>
      <detail-goods-info :detail-info="detailInfo" @imageLoad="imageLoad"></detail-goods-info>
      <detail-param-info ref="params" :param-info="paramInfo"></detail-param-info>
      <detail-comment-info ref="comment" :comment-info="commentInfo"></detail-comment-info>
      <goods-list ref="recommend" :listgoods="recommends"></goods-list>
    </scroll>
    <detail-bottom-bar></detail-bottom-bar>
    <back-top @click.native="backTop" v-show="isShowBackTop"></back-top>
  </div>
</template>
<script>
import DetailNavBar from './childComps/DetailNavBar'
import DetailSwiper from './childComps/DetailSwiper'
import DetailBaseInfo from './childComps/DetailBaseInfo'
import DetailShopInfo from './childComps/DetailShopInfo'
import DetailGoodsInfo from './childComps/DetailGoodsInfo'
import DetailParamInfo from './childComps/DetailParamInfo'
import DetailCommentInfo from './childComps/DetailCommentInfo'
import DetailBottomBar from './childComps/DetailBottomBar'

import Scroll from 'components/common/scroll/Scroll'
import GoodsList from 'components/content/goods/GoodsList'
import { getDetail, Goods, Shop, GoodsParam, getRecommend } from 'network/detail'

import {itemListenerMixin,backTopMixin} from "common/mixin"

export default {
  name:'Detail',
  components:{
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo,
    DetailShopInfo,
    DetailGoodsInfo,
    DetailParamInfo,
    DetailCommentInfo,
    DetailBottomBar,
    Scroll,
    GoodsList
  },
  mixins:[itemListenerMixin,backTopMixin],
  data() {
    return {
      iid:null,
      //轮播图数据
      topImages:[],
      // 商品信息
      goods:{},
      // 店铺信息
      shop:{},
      // 商品的详情数据
      detailInfo:{},
      // 商品的详情的参数信息数据
      paramInfo:{},
      // 商品评论
      commentInfo:{},
      // 商品推荐数据
      recommends:[],
      themeTopYs:[],
      currentIndex:null,

    }
  },
  created() {
    // 1.保存传入的iid
    this.iid = this.$route.params.iid
    // 2.根据iid请求详情数据
    getDetail(this.iid).then(res => {
      console.log('res',res);
      // 1.获取顶部的图片轮播数据
      const data = res.result;
      // 2.获取轮播图数据
      this.topImages = data.itemInfo.topImages;

      // 3.获取商品信息
      this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)
      // console.log('this.goods',this.goods)

      // 4.创建店铺信息的对象
      this.shop = new Shop(data.shopInfo)
      // console.log('this.shop',this.shop)

      // 5.保存商品的详情数据
      this.detailInfo = data.detailInfo;
      // console.log('this.detailInfo', this.detailInfo);

      // 6.获取参数的信息
      this.paramInfo = new GoodsParam(data.itemParams.info,data.itemParams.rule)
      
      // 7.获取商品评论信息
      if(data.rate.cRate !== 0){
        this.commentInfo = data.rate.list[0];
      }
      
      /*
      // 1.第一次获取，值不对，原因：this.$refs.params.$el还没有渲染
      // this.themeTopYs = [];
      // this.themeTopYs.push(0);
      // this.themeTopYs.push(this.$refs.params.$el.offsetTop);
      // this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
      // this.themeTopYs.push(this.$refs.recommend.$el.offsetTop);
      // console.log('~~',this.themeTopYs);

      // 2.第二次获取，值不对，原因：图片没有获取
      this.$nextTick(() => {
        // 根据最新的数据，对应的DOM已经被渲染出来
        // 但是图片依然没有加载完（目前获取到offsetTop不包含其中的图片）
        this.themeTopYs = [];
        this.themeTopYs.push(0);
        this.themeTopYs.push(this.$refs.params.$el.offsetTop);
        this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
        this.themeTopYs.push(this.$refs.recommend.$el.offsetTop);
        console.log('~~',this.themeTopYs);

      })

      */

    })
    // 3.获取商品推荐数据
    getRecommend().then(res => {
      // console.log('res商品推荐数据',res);
      this.recommends = res.data.list;
    })

  },
  methods: {
    imageLoad(){
      // this.newRefresh();
      this.$refs.scroll.refresh();

      // 商品-参数-评论-推荐，点击标题滚动到对应内容
      this.themeTopYs = [];
      this.themeTopYs.push(0);
      this.themeTopYs.push(this.$refs.params.$el.offsetTop);
      this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
      this.themeTopYs.push(this.$refs.recommend.$el.offsetTop);

      this.themeTopYs.push(Number.MAX_VALUE);
      // console.log('~~',this.themeTopYs);
    },
    titleClick(index){
      this.$refs.scroll.scrollTo(0,-this.themeTopYs[index],200)
    },
    
    // 商品-参数-评论-推荐，页面滚动，对应标题active
    contentScroll(position){
      // console.log('position',position);
      // 1.获取y值
      const positionY = -position.y;

      // 2.positionY和主题中值[0, 10697, 11423, 11618]进行对比

      // 1:普通做法：条件1：length - 1 
      // positionY在0和10697之间，index = 0
      // positionY在=10697和11423之间，index = 1
      // positionY在=11423和11618之间，index = 2

      // 1:普通做法：条件2：
      // positionY大于等于11618值，index = 3

      // 2.hack做法：
      // positionY 在 0和10697之间，index = 0
      // positionY 在 =10697和11423之间，index = 1
      // positionY 在 =11423和11618之间，index = 2
      // positionY 在 11618 和 非常大的值之间，index = 3
      // [0, 10697, 11423, 11618,非常大的值]
      // [0, 10697, 11423, 11618,Number.MAX_VALUE]
      // console.log(Number.MAX_VALUE)最大值
      

      let length = this.themeTopYs.length;
      for(let i = 0; i < length-1; i++){
      // for(let i = 0; i < length; i++){
      // for(let i in this.themeTopYs){
        // console.log('i+1',i+1);
        // console.log('typeOf',typeof(i));
        // console.log(i);//string: 0,1,2,3
        // if(positionY > this.themeTopYs[parseInt(i)] && positionY < this.themeTopYs[i+1]){
        //   console.log('i',i);
        // }

        // this.currentIndex !== i 判断和currentIndex是否一致，一致的话就不需要判断 &&后面的条件了，currentIndex就不需要重新赋值；
        // 不一致才会走后面的判断，重新给currentIndex赋最新的i值
        // 就不会一直打印(调用频繁：this.currentIndex !== i)
        // 1:普通做法：
        // if(this.currentIndex !== i && ((i < length - 1 && positionY >= this.themeTopYs[i] && positionY < this.themeTopYs[i+1]) || (i === length - 1 && positionY >= this.themeTopYs[i])) ){
        //   // console.log('i',i);
        //   this.currentIndex = i;
        //   console.log('this.currentIndex',this.currentIndex);
        //   this.$refs.detalnavbar.currentIndex = this.currentIndex;
        // }

        // hack做法：
        if(this.currentIndex !== i && (positionY >= this.themeTopYs[i] && positionY < this.themeTopYs[i+1])){
          this.currentIndex = i;
          this.$refs.detalnavbar.currentIndex = this.currentIndex;
        }
        
      }
      // 3.是否显示回到顶部
      this.listenShowBackTop(position);//mixin.js
      // this.isShowBackTop = (-position.y) > 1000

    },
    
  },
  mounted() {

    // console.log('Detail mounted');
    
    // 用混入mixin
    // let newRefresh = debounce(this.$refs.scroll && this.$refs.scroll.refresh,100);
    // this.itemImgListener = () => {
    //   newRefresh();
    // }
    // this.$bus.$on('itemImgLoad',this.itemImgListener);
  },
  updated() {
    // this.themeTopYs = [];
    // this.themeTopYs.push(0);
    // this.themeTopYs.push(this.$refs.params.$el.offsetTop);
    // this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
    // this.themeTopYs.push(this.$refs.recommend.$el.offsetTop);
    // console.log('~~',this.themeTopYs);
  },
  destroyed(){
    this.$bus.$off('itemImgLoad',this.itemImgListener);
  }
}
</script>
<style scoped>
#detail {
  height: 100vh;
  position: relative;
  z-index: 1;
  background-color: #fff;
}
.detail-nav{
  position: relative;
  z-index: 1;
  background-color: #fff;
}
.content{
  position: absolute;
  top: 44px;
  bottom: 60px;
}
.back-top{
  position: fixed;
  right: 10px;
  bottom: 65px;
}
</style>